<template>
    <div class="outsideBox">

        <div class="subBox">
            <ul>
                <li>
                   <div class="label">昵称</div>
                   <div class="info">
                       <input type="text" class="nameInput" maxlength="8" v-show="!isShowName" :disabled = !isShowName  placeholder="未填写" v-model="subName">
                   <span v-show="isShowName" class="rightTwo">{{memberInfo.name}}</span>
                   </div>
                   
                </li>
                <li>
                    <div class="label">手机号</div>
                    <div class="info">{{memberInfo.phone}}</div>
                </li>
            </ul>
        </div>



        <div class="subBtn">
            <!-- <div class="botton" disabled="disabled" @click="subBtn">保存</div> -->
        </div>
    </div>
</template>
<script>
import api from "@/api/index";
export default {
    name: 'personalMaterial',
    data(){
        return{
            
            subName:'',
            isShowName : false,

            memberInfo:{
                name:'',
                phone:'',
            },

        }
    },
    created() {
        this.token = localStorage.getItem("Token");
        this.getMemberInfoApiFun();
    },
    methods: {
        //进入页面请求个人数据
        getMemberInfoApiFun(){
            let obj = {
                token:this.token
            }
            api.getMemberInfoApi(obj).then(res=>{
                console.log(obj)
                if (res.msgCode === "000"){
                    this.memberInfo.name=res.data.nickName;
                    this.memberInfo.phone=res.data.phone;

                    if(this.memberInfo.name){
                        this.isShowName = true
                        if(this.memberInfo.name.length>8){
                            this.memberInfo.name = this.memberInfo.name.slice(0,8) + '...'
                        }
                    }else{
                        this.isShowName = false
                    }

                    if(this.memberInfo.phone){
                        this.memberInfo.phone = this.memberInfo.phone.slice(0,3) + '****' +this.memberInfo.phone.slice(7,11)
                    }
                }else{
                    this.$message({
                        message: res.msg,
                        type: "error"
                    });
                }

            })
        },
        //点击保存提交修改的昵称
        subBtn(){
            this.$router.push({path:"/mine"})

        }

    }
}
</script>
<style scoped>
    .outsideBox{
        width: 100%;
        height:100vh;
        background-color: #f7f7f9;
        /* padding-left: 16px; */
    }

    .subBox{
        width: 100%;
        background-color: white;
        padding-left:16px;
        box-sizing: border-box;
    }
    .subBox ul{
        margin-bottom: 50px;
        
    }
    .subBox ul li{
        color: #777777;
        font-size: 15px;
        width: 100%;
        padding-right: 16px;
        height: 55px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        font-family: PingFangSC-Regular;
        
    }
    .subBox ul li .label{
        font-size: 15px;
    }
    .subBox ul li .info{
        color: #333333;
    }
    .subBox ul li:nth-child(1){
        border-bottom: 1px solid #eeeeee
    }


    .subBtn{
        width: 100%;
        height: 45px;
        
        
        text-align: center;
        line-height: 45px;
        color: white;
        padding: 0 16px;
        box-sizing: border-box;
    }
    .subBtn .botton{
        background-color: #f73657;
        border-radius: 6px;
    }

 


    .nameInput{
        font-size: 16px;
        float: right;
        text-align: right;
        font-family: PingFangSC-Regular;
    }


</style>

